iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

Html/Css3/Javascript從0開始自學系列 第 7

Html/Css3整合練習-第七天

  • 分享至 

  • xImage
  •  

這次主要參考的書(或文章影片)是:「HTML5+CSS3這樣就上手 出版社:再生」/CSScoke大大的「金魚都能懂的網頁教學」/彭彭大大的「Html教學影片」

前言:轉眼間已經過了一個禮拜了!照原本的行程應該繼續解釋css/html相關的東西,但感覺卻好像沒太多東西可以說了!一來是我感覺基本的語法會了後,剩下的延伸感覺應該要自己去找資源來用了,畢竟每個人想要的東西可能不太一樣;二來是這幾天我也主要都在閱讀「node.js的九堂實作課」這本書(雖然有點卡關QQ)沒有太多時間去吸收html/css這邊的知識,所以今天打算把自己的幾個練習放上來,並更新自己css的筆記

範例一:

<html>
<head>
<title>基本資料</title>
<meta charset="utf-8">
</head>
<body>
<h1>基本資料</h1>
<p>姓名:aaa</p>
<p>星座:天秤</p>
<p>血型:AB</p>
<p>綽號:bbb</p>
</body>
</html>

上面這個範例基本上只有簡單的標籤跟內文
算是第二天時的成果吧

範例二

<html>
<head>
<title>個人網頁</title>
<meta charset="utf-8">
<style>
        #myfont{font-style:italic;
           color:aquamarine;}
    .mylink:link{color:red;}
    .mylink:visited{color:purple;}
    .mylinl:hover{color:gray;}
    .mylink:active{color:orchid;}
</style>

</head>
<body> 
<h1>自我介紹 </h1>  
<h1 id="myfont">電玩篇</h1>
<a class="mylink" href="file:///Users/xuchengyan/Desktop/html/大一網頁作業/WADE.html" target="_blank">我的興趣</a>
<br>
<a class="mylink" href="file:///C:/Users/ASUSSR/Desktop/%E5%8F%B0%E5%8D%97.html" target="_blank">我的家鄉</a>
<br>
<a class="mylink" href="file:///Users/xuchengyan/Desktop/html/大一網頁作業/自我介紹.html" target="_blank">自我介紹</a>
</body>
</html>

這個範例加上了不少選取器的使用

範例三

!DOCTYPE html>
<html>
  <head>
    <title>Travel website </title>
    <meta charset="utf-8"></meta>
    <meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=2" />
    <script type="text/javascript">
      function toggleMenu(number){
        var menu=document.getElementById("menu-"+number);
        menu.classList.toggle("hide");//利用toggle控制hide
         /* if(menu.style.display=="none"){
            menu.style.display="block";
          }else{
            menu.style.display="none";
          }利用程式控制開合*/         
        }
    </script>
    <link rel="stylesheet" type="text/css" href="spotlight.css"/>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    <style type="text/css">@font-face {
      font-family: myfont;
      src: url(fonts/Chantelli_Antiqua-webfont.woff);}

      #body{width: 800px;
      margin:0 auto;}

      #header{width:100%;
      height:100%;
      text-align: center;
      background-color: burlywood;
      border-radius:0px;}

     #nav{width:100%;
     height:50px;
     text-align:center;
     background-color:darksalmon;
     border-radius: 0px;
     margin-top:-20px;}

     #aside{width:20%;
     height:400px;
     text-align:center;
     background-color: gold;
     border-radius: 0px;
     float:left;}

     #section{width:80%;
     height:400px;
     text-align:center;
     background-color:lightgoldenrodyellow;
     border-radius: 30px;
     float:right;}

     #footer{width:100%;
     height:120px;
     text-align: center;
     background-color: khaki;
     border-radius: 30px;
      clear:both}

    .hide{display:none;}

    </style>
  </head>
  <body>
   <header id="header"> <h1 class=spotlight>旅遊網站</h1></header>

   <nav id="nav"><h3>kkkk</h3></nav>

   <aside id="aside">

     <div onclick="toggleMenu(1);" text-align="left">1.<button>國內旅遊</button></div>
      <ul id="menu-1" class="hide">
        <li>北部</li>
        <li>中部</li>
        <li>南部</li>
        <li>東部</li>
      </ul>

    <div onclick="toggleMenu(2);" text-align="left">2.<button>國外旅遊</button></div>
      <ul id="menu-2" class="hide">
        <li>亞洲</li>
        <li>歐洲</li>
        <li>美洲</li>
        <li>其他</li>
      </ul>

    <div onclick="toggleMenu(3);" text-align="left">3.<button>外島旅遊</button></div>
      <ul id="menu-3" class="hide">
        <li>澎湖</li>
        <li>金馬</li>
        <li>蘭嶼綠島</li>
        <li>小琉球</li>
        <li>其他</li>
      </ul>  
    
    <div><font-color="red">帳號申請/登入</font-color></div>
    <form>
      帳號:<input type="text" name="data1" size="20">
      <br>
      密碼:<input type="text" name="data2" size="20">
      <input type="submit" value="送出">
    </form>
  </aside> 

  <section id="section">
    <h1 text-align="center">網站未來目標</h1>
    <p>短期目標:希望建立旅遊資料的文章庫,讓大家出遊時有一個整理好的網站可以參訪,
      <br>同時讓大家可以分享自己的出遊心得
    </p>
    <br>
    <p>中期目標:提供更多便利的旅遊相關資訊,例如:民宿訂購/旅遊vlog分享/
      <br>與各地政府合作發展出有當地特色的行程/
      <br>作為民意機構與旅行社合作成立真正顧客導向的行程</p>
      <br>
      <p>長遠目標:1.希望結合VR發展旅遊業 2發展成自由的貨幣兌換網站以利旅遊
        <br>VR好處:一:幫助貧窮家庭一圓國外旅遊夢想(節省機票與高昂住宿費)
        <br>&nbsp &nbsp &nbsp 二:讓繁忙的家庭也能有共同出遊的機會(節省大量交通時間)
        <br> 三:讓VR行程成為出遊前的參考依據         
      </p>
  </section>

  <footer id="footer">
    <h4 class=textStyle2>創辦者:Shark Hsu</h4>
    <a href="mailto:sss86925@gmail.com">聯絡作者</a>
  </footer>
  </body>
</html>

最後這個看起來又跟完整一點了!還用到了一點未來要講的東西(javascript)
也做了簡單的排版,今天本來也打算講排版的
後來想想自己沒什麼美術細胞,還是不要亂發文好了
以上的範例基本上開起來嘗試前,我自己都會預想一下大概長怎樣
這幾天做了越來越好些,感覺都能跟自己預想的八九不離十
其實很有成就感


上一篇
Css:今晚我想來點一勞永逸的方法-第六天
下一篇
JavaScript基本介紹-第八天
系列文
Html/Css3/Javascript從0開始自學17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言